<template>
  <van-popup :show="show" position="bottom" custom-style="height: 30%;overflow: hidden;" @close="onClose">
    <van-datetime-picker
      type="date"
      :value="currentDate"
      @input="onInput"
      :min-date="minDate"
      :formatter="formatter"
      @confirm="confirm"
      @cancel="cancel"
    />
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      currentDate: Date.now(),
      minDate: Date.now(),
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        } else if (type === "month") {
          return `${value}月`;
        }
        return value;
      },
      selectedDate: null
    };
  },
  props: {
    show:  {
      type: Boolean,
      default: false
    },

  },
  methods: {
    onClose() {
      this.show = false;
    },
    onInput(event) {
      this.selectedDate = event.mp.detail;
    },
    confirm() {
      this.$emit('confirm', this.selectedDate);
    },
    cancel() {
      this.selectedDate = '';
      this.$emit('cancel');
    }
  }
};
</script>

<style lang="less">
</style>